<!DOCTYPE html>
<html lang="en"

      xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

  <title>收藏列表</title>
  <style>
    nav {
      font-size: 1.5rem;
      background-color: #21D4FD;
      background-image: -webkit-linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
      background-image: -moz-linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
      background-image: -o-linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
      background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
    }
    h1 {
      font-size: 2rem;
    }
    li {
      margin: 10px 20px;
    }
    body {
      /*             background-image: url("../static/img/2.jpg"); */
      background-size: cover;
    }





    table {
      width: 1200px;
    }
    table, td, th {
      border: 1px solid #000;
      border-collapse: collapse;
      text-align: center;
    }
    table tr {
      height: 60px;
    }
    #pages {
      width: 1200px;
      height: 50px;
      border: gainsboro solid;
      border-width: 1px;
      background-color: whitesmoke;
      display: flex;
      line-height: 50px;
      justify-content: space-between;
      margin-top: 20px;
    }
    #pages #left {
      display: flex;
    }
    #left{
      padding-left: 300px;
    }

    #left div {
      text-align: center;
      border-right: 1px solid #000;
      padding-left: 5px;
      padding-right: 5px;
    }

    #left div a {
      text-decoration: none;
      display: block;
      height: 100%;
      width: 100%;
      color: #000;
    }

    #left div a:hover {
      cursor: pointer;
      background-color: gray;
    }

    #left div:first-child {
      width: 180px;
    }
    #left div:not(first-child) {
      width: 100px;
    }
    #table caption{
      caption-side: top;
    }
    img {
      width: 50px;
      height: 80px;
    }
  </style>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
  <ul class="navbar-nav">
    <li>
      <h1><a th:href="@{/web/toindex}" style="color: white; text-decoration: none">恋文图书管理系统</a></h1>
    </li>
    <li class="nav-item">
      <a class="nav-link" th:href="@{/book/showbook1}">图书信息</a>
    </li>

    <li class="nav-item">
      <a class="nav-link" >借阅记录</a>
    </li>
  </ul>


  <div class="text-white" style="font-size: medium; position: absolute; bottom: 30px; right: 40px">
    <div class="dropdown">
      <a class="dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
         th:text="${session.user.username}+', 您好'">
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a th:if="${session.user.admin} eq '0'" class="dropdown-item" th:href="@{/web/tofollowlist}" >收藏列表</a>
        <a th:if="${session.user.admin} eq '0'" class="dropdown-item" th:href="@{/user/userinfo(username = ${session.user.username})}" >个人信息</a>
        <a th:if="${session.user.admin} eq '0'" class="dropdown-item" th:href="@{/web/toupdatepw}">修改密码</a>
        <a class="dropdown-item" th:href="@{/user/logout}">注销</a>
      </div>
    </div>
  </div>
</nav>

<table id="table" class="table table-hover table-striped table-bordered " style="margin-top: 10px">
  <caption style="text-align: center">


  </caption>

  <tr>
    <th>书籍编号</th>
    <th>封面</th>
    <th>书籍</th>
    <th>作者</th>
    <th>出版社</th>
    <th>价格</th>
    <th>状态</th>
    <th>操作</th>
  </tr>

  <tbody>
  <!--  thymeleaf遍历数据-->
  <tr  th:each="book:${pageBean.books}">
    <td th:text="${book.bookid}"></td>
    <td><img th:src="${book.img}"></td>
    <td th:text="${book.bookname}"></td>
    <td th:text="${book.author}"></td>
    <td th:text="${book.publisher}"></td>
    <td th:text="${book.price}"></td>
    <td th:switch="${book.status}">
      <span th:case="0">在馆</span>
      <span th:case="1">已借出</span>
    </td>
    <td>

      <a class="btn btn-primary btn-sm" th:href="@{/book/delfollowbook(bookid=${book.bookid}) }">取消收藏</a>
      <a class="btn btn-primary btn-sm" th:href="@{/book/bookedit(bookid=${book.bookid}) }">详情</a>

    </td>
  </tr>
  </tbody>


</table>
<!--翻页功能-->
<div id="pages" style="width: 100%" class="table table-hover table-striped table-bordered">
  <div id="left">
    <!--    显示当前的页面信息    -->
    <div>
      <a th:text="'共有'+${pageBean.totalSize}+'条数据'+'  '+${pageBean.currentPage}+'/'+${pageBean.totalPage}+'页'"></a>
    </div>
    <!--首页:带数据跳转到showbook方法-->
    <div>
      <a th:href="@{/book/showfollow(page=1)}">首页</a>
    </div>
    <div>
      <!--上一页:分两种情况，《1》当前页码小于等于1时传的数据page=1.《2》当当前页码大于1时page=当前页码-1-->
      <a th:if="${pageBean.currentPage} le '1'" th:href="@{/book/showfollow(page=1)}">上一页</a>

      <a th:if="${pageBean.currentPage} gt '1'" th:href="@{/book/showfollow(page=${pageBean.currentPage}-1)}">上一页</a>
    </div>

    <!--下一页:分两种情况，《1》当当前页码大于等于总页码时page=总页码数。《2》当前页码小于总页码时page=当前页码+1-->
    <div>

      <a th:if="${pageBean.currentPage} ge ${pageBean.totalPage}" th:href="@{/book/showfollow(page=${pageBean.totalPage})}">下一页</a>
      <a th:if="${pageBean.currentPage} lt ${pageBean.totalPage}" th:href="@{/book/showfollow(page=${pageBean.currentPage}+1)}">下一页</a>

    </div>
    <div>
      <!--尾页:page=总页码跳转到showbook-->
      <a th:href="@{/book/showfollow(page=${pageBean.totalPage})}">尾页</a>
    </div>
  </div>

</div>



</body>
<script src="/js/ajax.aspnetcdn.com_ajax_jquery_jquery-1.9.0.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</html>